<template>
	<view class="productDateli" v-if="swipeList.length!=0">
		<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
			<swiper-item v-for="(item,index) in swipeList" :key="index">
				<view class="swipe-item">
					<image :src="item"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="productSubtitle">
			<view style="font-weight: 700;">{{product.subTitle}}</view>
			<view>
				<text style="" class="newPrice">￥{{product.price}}</text>
				<text style="text-decoration: line-through;padding-left: 20rpx;
				color: gray;
				">￥{{product.originalPrice}}</text>
			</view>
			<view style="color: gray;">
				<text>增送积分:{{ product.giftPoint }}</text>
				<text style="padding-left: 20rpx;">增送成长值:{{ product.giftGrowth }}</text>
			</view>
		</view>

		<!-- 服务 -->
		<view class="serve" v-if="serveList.length!=0">
			<view v-for="(item,index) in serveList" :key="index">
				<image src="../../static/ok-o.png" mode=""></image>
				<text v-if="item==1">
					无忧退货
				</text>
				<text v-if="item==2">
					快速退货
				</text>
				<text v-if="item==3">
					免费包邮
				</text>
				<text v-if="!item">
					无
				</text>

			</view>
		</view>

		<!-- 商品详情 -->
		<view v-html="detailHtml" ref="imgaeDetail">
		</view>

		<!-- 参数 -->
		<view class="">
			<uni-section title="商品参数" type="circle">
				<uni-table ref="table" stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">参数</uni-th>
						<uni-th width="150" align="center">可选值</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in attributeList" :key="index">
						<uni-td align="center">
							{{ item.name }}
						</uni-td>
						<uni-td align="center">{{ item.inputList }}</uni-td>
					</uni-tr>
				</uni-table>
			</uni-section>
		</view>
		<!-- 评价 -->
		<view class="evaluate">
			<uni-section title="用户评价" type="circle">
				<view class="evaluate-item">
					<view>
						<image src="http://mall.shyvv.com/static/img/mall-log.b7942df5.png" mode=""
							style="width: 100rpx;height: 100rpx;vertical-align: middle;"></image>
						<text style="padding-left: 10rpx;">小王</text>
					</view>
					<view>
						商品收到了，质量很好没有色差做工精细，款式时尚大方穿在身上大小合适价格实惠
					</view>
					<view style="color: gray;">
						2020-10-06 19:06:52
					</view>
				</view>
				<view class="evaluate-item">
					<view>
						<image src="http://mall.shyvv.com/static/img/mall-log.b7942df5.png" mode=""
							style="width: 100rpx;height: 100rpx;vertical-align: middle;"></image>
						<text style="padding-left: 10rpx;">wx_bb9y5xwmtreuy</text>
					</view>
					<view>
						宝贝收到了，非常喜欢，质量很好，卖家热情，物流给力，非常愉快的一次购物，好评！好高好高好好好好好好好好
					</view>
					<view style="color: gray;">
						2020-11-08 19:06:52
					</view>
				</view>
			</uni-section>
		</view>

		<!-- 猜你喜歡 -->
		<view>
			<view class="likeproduct">
				<text class="likeTitle" space="ensp">猜 你 喜 欢</text>
			</view>

			<view class="goods">
				<view class="goodsItem" v-for="(item,index) in likeProductList" :key="index" @tap="gotoDetail(item.id)">
					<view>
						<image :src="item.pic"></image>
					</view>
					<view class="price">
						<text class="newPrice">￥{{item.price}}</text>
						<text class="olbPrice">￥{{item.originalPrice}}</text>
					</view>
					<view>
						<text class="productTitle">
							{{item.name}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 加入购物车部分 -->
		<view style="position: fixed;bottom: 0; z-index: 1000; width: 100%;">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="iconClick"
				@buttonClick="buttonClick" />
		</view>

		<!--  @touchmove.stop.prevent="" 出现遮盖层不可滑动 -->
		<!-- 加入购物车弹出框 -->
		<view class="pop" v-show="isShowPop" @touchmove.stop.prevent="">
			<!-- 遮盖层 -->
			<view class="pop-mask" @click="hide">
			</view>
			<!-- 显示层 -->
			<view class="pop-box" :animation="animationData">
				<!-- 顶部 -->
				<view class="skuImage">
					<image :src="product.pic" mode=""></image>
					<view style="padding-left: 10rpx;">
						<view>
							<text style="font-size: 40rpx;color: #cb0d0d;font-weight: 700;">￥{{price}}</text>
							<text style="text-decoration: line-through;padding-left: 20rpx;
							color: #cb0d0d;
							">￥{{product.originalPrice}}</text>
						</view>
						<view style="color: gray;">库存:{{stock}} {{product.unit}}</view>
						<view style="color: gray;">
							<text>编号:{{skuCode}}</text>
						</view>
					</view>
				</view>

				<!-- sku规格 -->
				<view class="attrSkuVal">
					<view class="skuItme" v-for="(item,index) in spuData" :key="item.id"
						:class="{colorAtiv:item.checked==index}" @click="checkedItem(index)">
						{{item.value}}
					</view>
				</view>

				<!--  数量 -->
				<view class="number">
					<text style="padding: 0 10rpx;">数量 : </text>
					<uni-number-box :min="1" :max="stock" v-model="getNumber"></uni-number-box>
				</view>


				<!-- 底部确定 -->
				<view class="skuBtn" @tap="addCart">
					确定
				</view>

			</view>
		</view>

		<!-- 优惠卷 -->
		<view class="example-body">
			<view class="example-body">
				<view class="discountsPop" v-show="showdiscounts" @touchmove.stop.prevent="">
					<!-- 遮盖层 -->
					<view class="pop-mask" @click="hidediscounts">
					</view>
					<!-- 显示层 -->
					<view class="pop-box" :animation="animationData">
						<!-- <view
							style="text-align: center;font-size: 40rpx;padding: 10rpx 0;color: #cb0d0d;font-weight: 700;">
							可领取优惠劵</view> -->
						<view style="height: 100%;overflow: auto; " v-if="discounts.length!=0">
							<view class="discounts" v-for="(item,index) in discounts" :key="index">
								<view class="topTitle">
									{{item.name}}
								</view>
								<view style="display: flex;">
									<view class="discountsPrice">
										<text>￥{{item.amount}}</text>
									</view>

									<view style="
									 width:350rpx ;
									 overflow: hidden;
									 white-space: nowrap;
									 text-overflow: ellipsis;
									 color: white;
									 padding-left: 10rpx;
									">
										<text>{{item.note}} </text><br>
										<text> 到期时间:{{item.endTime | formatCreateTimes}}</text>
									</view>
									<view style="color: white;font-weight: 700;
									font-size: 30rpx;
									" @tap="getDiscount(item.id)">
										立即领取
									</view>
								</view>
							</view>
						</view>

						<view v-if="discounts.length==0">
							<empty text="无可领取优惠"></empty>
						</view>

					</view>
				</view>
			</view>
		</view>


		<!--返回顶部 -->
		<SorllTop :value="ShowScroll" :ScrollTopTime="300"></SorllTop>


	</view>
</template>

<script>
	import SorllTop from '@/components/ScrollTop.vue'
	import {
		formatDate
	} from "@/utils/Time.js"
	import empty from '@/components/empty.vue'
	export default {
		components: {
			SorllTop,
			empty
		},
		data() {

			return {
				swipeList: [],
				product: {},
				serveList: [],
				detailHtml: '',
				attributeList: [],
				ShowScroll: false,
				likeProductList: [],
				options: [{
					icon: 'gift-filled',
					text: '优惠卷'
				}, {
					icon: 'cart',
					text: '购物车',
					infoColor: "red"
				}, {
					icon: 'star',
					text: '收藏',
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				],
				isShowPop: false,
				animationData: {},
				sku: [],
				showRight: false,
				showdiscounts: false,
				// 优惠卷
				discounts: [],
				toggleSkuVal: 0,

				// 处理完的json的数据
				spuData: [],
				skuCode: '',
				price: 0,
				stock: 0,
				getNumber: 1,
				messageText: '',
				checkIndex: 0
			}
		},
		//注意函数和data同级,不要写在methods内	
		onNavigationBarButtonTap(e) {
			if (e.type == "home" && e.index == 0) {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		},
		onLoad(options) {
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			// #ifdef MP-WEIXIN || QUICKAPP-WEBVIEW || QUICKAPP-WEBVIEW-HUAWEI  || QUICKAPP-WEBVIEW-UNION
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			
			// #endif
			
			setTimeout(() => {
				this.getDateList(options.Pid)
				this.getLikeLIst()
			}, 300)
			uni.showLoading({
				title: '加载中'
			});
		},
		onPageScroll(e) {
			if (e.scrollTop >= 500) {
				this.ShowScroll = true
			} else {
				this.ShowScroll = false
			}
		},
		mounted() {},
		filters: {
			formatCreateTimes(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd')
			},
		},
		methods: {
			getDateList(id) {
				this.$api.home.getproductDetail(id).then(res => {
					if (res.code == 200) {
						this.gethistory(res.data.product)
						uni.hideLoading();
						this.swipeList = []
						// 轮播图片
						if (res.data.product.albumPics != "") {
							this.swipeList = res.data.product.albumPics.split(",")
						} else {
							this.swipeList.push(
								"https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png"
							)
						}
						// 商品信息
						this.product = res.data.product

						// serve 服务
						this.serveList = res.data.product.serviceIds.split(",")

						// 商品详情
						this.detailHtml = this.product.detailHtml.replace(/\<img/g,
							'<img style="max-width:100%;height:auto;border: none;vertical-align: middle;" ')
						// 规格
						this.attributeList = res.data.attributeList

						this.discounts = []
						this.$api.user.getlistByProduct(this.product.id).then(res => {
							if (res.code == 200) {
								this.discounts = res.data
							}
						})

						// 处理sku数据
						let arrSku = [];
						res.data.skuStockList.forEach((item) => {
							arrSku.push({
								id: item.id,
								price: item.price,
								spData: item.spData,
								attr: JSON.parse(item.spData),
								attrVal: [],
								value: "",
								checked: 0, //是否选择
								quantity: 0, //购买数量
								productName: this.product.name,
								productSkuCode: item.skuCode,
								productPic: this.swipeList[0],
								stock: item.stock //库存
							});
						});

						// 处理格式  银色+32G
						arrSku.forEach((item) => {
							item.attr.forEach((j) => {
								item.attrVal.push(j.value);
							});
							item.value = item.attrVal.join("+");
						});
						this.spuData = arrSku
						this.skuCode = arrSku[0].productSkuCode
						this.price = arrSku[0].price
						this.stock = arrSku[0].stock
					} else {
						uni.showToast({
							title: "请求失败",
							icon: 'none'
						})
					}
				})
			},
			// 我的足跡
			gethistory(product) {
				if (uni.getStorageSync("TOKEN")) {
					let params = {
						productId: product.id,
						productName: product.name,
						productPic: product.pic,
						productPrice: product.price,
						productSubTitle: product.subTitle,
					}
					this.$api.history.createHistory(params)
				}
			},
			getLikeLIst() {
				let number = parseInt(Math.random() * 4) + 1
				let params = {
					pageNum: number,
					pageSize: 10
				}
				this.$api.home.portalProduct(params).then(res => {
					if (res.code == 200) {}
					this.likeProductList = res.list
				})
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: `/pages/view/ProductDetail?Pid=${id}`
				})
			},
			// 点击图标
			iconClick(e) {
				if (e.index == 0) { //优惠卷
					var animation = uni.createAnimation({
						duration: 300,
					})
					animation.translateY(300).step();
					this.animationData = animation.export()
					setTimeout(() => {
						animation.translateY(0).step();
						this.animationData = animation.export()
						this.showdiscounts = true
					}, 100)
				} else if (e.index == 1) {
					uni.switchTab({
						url:"/pages/tabBar/cart"
					})
				} else if (e.index == 2) {
					uni.showToast({
						title: "敬请期待！",
						icon: 'loading'
					})
				}
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
			},
			// 点击加入购物车或者立即购买
			buttonClick(e) {
				if (e.index == 1) {
					uni.showToast({
						title: "敬请期待！",
						icon: 'loading'
					})
					return
				}

				var animation = uni.createAnimation({
					duration: 300,
				})
				animation.translateY(300).step();
				this.animationData = animation.export()
				setTimeout(() => {
					animation.translateY(0).step();
					this.animationData = animation.export()
					this.isShowPop = true
				}, 300)
			},
			// 加入购物车隐藏
			hide() {
				var animation = uni.createAnimation({
					duration: 500,
				})
				animation.translateY(600).step();
				this.animationData = animation.export()
				setTimeout(() => {
					animation.translateY(0).step();
					this.isShowPop = false
				}, 300)
			},
			hidediscounts() {
				var animation = uni.createAnimation({
					duration: 400,
				})
				animation.translateY(600).step();
				this.animationData = animation.export()
				setTimeout(() => {
					animation.translateY(0).step();
					this.showdiscounts = false
				}, 300)
			},
			showDrawer(e) {

			},
			// 切换sku
			checkedItem(index) {
				this.checkIndex = index
				this.spuData.forEach(item => {
					item.checked = 0
				})
				this.spuData[0].checked = 200
				this.spuData[index].checked = index
				this.skuCode = this.spuData[index].productSkuCode
				this.price = this.spuData[index].price
				this.stock = this.spuData[index].stock
			},
			getDiscount(id) {
				this.$api.user.GetDiscounts(id).then(res => {
					this.hidediscounts()
					setTimeout(() => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}, 600)
				})
			},
			// 加入购物车
			addCart() {
				if (uni.getStorageSync("TOKEN")) {
					let params = {
						deleteStatus: this.product.deleteStatus,
						memberId: 0,
						memberNickname: "",
						price: this.price,
						productAttr: this.spuData[this.checkIndex].spData,
						productBrand: this.product.brandName,
						productCategoryId: this.product.productCategoryId,
						productId: this.product.id,
						productName: this.product.name,
						productPic: this.product.pic,
						productSkuCode: this.skuCode,
						productSkuId: this.spuData[this.checkIndex].id,
						productSn: this.product.productSn,
						productSubTitle: this.product.subTitle,
						quantity: this.getNumber,
					}
					this.$api.user.getUserInfo().then(res => {
						if (res.code == 200) {
							params.memberId = res.data.id
							params.memberNickname = res.data.nickname
						}
					})

					this.$api.home.AddCart(params).then(res => {
						if (res.code == 200) {
							this.hide()
							setTimeout(() => {
								uni.showToast({
									title: "以成功加入购物车!",
									icon: 'success'
								})
							}, 300)

						} else {
							uni.showToast({
								title: '出错了！请联系管理员',
								icon: 'error'
							})
						}
					})


				} else {
					this.hide()
					setTimeout(() => {
						uni.showModal({
							title: "您还没登录呐",
							confirmText: "去登录",
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/view/Login'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}


	.productDateli {
		padding-bottom: 50rpx;

		swiper {
			width: 100%;
			height: 700rpx;

			.swipe-item {
				image {
					width: 100%;
					height: 700rpx;
				}
			}
		}

		.productSubtitle {
			margin-top: 20rpx;

			.newPrice {
				color: #cb0d0d;
				font-weight: 700;
				// #ifdef MP-WEIXIN
				font-size: 40rpx;
				// #endif 
				// #ifdef H5
				font-size: 30rpx;
				// #endif 
			}
		}

		.serve {
			height: 100rpx;
			width: 100%;
			// border-top: 1px solid gainsboro;
			// border-bottom: 1px solid gainsboro;
			box-shadow: 0 0 10px gainsboro;
			margin: 20rpx 0;
			display: flex;
			line-height: 100rpx;
			text-align: center;

			view {
				flex: 1;
				height: 100rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
				}
			}
		}

		.evaluate {
			.evaluate-item {
				width: 100%;
				border-bottom: 1px solid gainsboro;
				border-top: 1px solid gainsboro;
				padding: 10rpx;
			}
		}

		.likeproduct {
			height: 100rpx;
			width: 100%;
			text-align: center;
			box-shadow: 0 0 8px #efefef;
			background-color: white;
			margin-top: 18rpx;

			text {
				line-height: 100rpx;
				font-size: 40rpx;
				color: #cb0d0d;
				font-weight: 700;
			}
		}

		.goods {
			background-color: #eeeeee;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.goodsItem {
				width: 355rpx;
				margin: 8rpx 8rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				overflow: hidden;
				box-shadow: 0px 0px 5px #e2e2e2;

				image {
					width: 100%;
					height: 200px;
				}

				.price {
					padding-left: 10rpx;

					.newPrice {
						font-size: 45rpx;
						color: #cb0d0d;
					}

					.olbPrice {
						color: gray;
						text-decoration: line-through;
					}

					text:nth-child(2) {
						margin-left: 17rpx;
					}
				}

				.shoppingsubTltie {
					padding-bottom: 30rpx;
				}

				.productTitle {
					color: gray;
				}
			}
		}

		.pop {
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			z-index: 9999;

			.pop-mask {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.3);
			}

			.pop-box {
				.colorAtiv {
					background-image: linear-gradient(to right, #f80f0f, #e82222, red) !important;
					color: white !important;
				}

				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 800rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background-color: white;
				overflow: auto;

				.skuImage {
					display: flex;
					height: 150rpx;
					padding: 20rpx;
					border-bottom: 1px solid gainsboro;

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}

				.attrSkuVal {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					// align-content: space-between;
					border-bottom: 1px solid gainsboro;
					height: auto;
					width: 100%;

					.skuItme {
						height: 60rpx;
						border-radius: 20rpx;
						line-height: 60rpx;
						text-align: center;
						min-width: 180rpx;
						margin: 15rpx 10rpx;
						background-color: #efefef;
					}
				}

				.skuBtn {
					position: fixed;
					bottom: 0;
					width: 100%;
					background-image: linear-gradient(to right, #ff2424, #f72323, red);
					height: 80rpx;
					line-height: 80rpx;
					color: white;
					text-align: center;
					font-size: 30rpx;
				}

				.number {
					display: flex;
					height: 60rpx;
					width: 100%;
					margin-top: 16rpx;
					border-bottom: 1px solid gainsboro;
					padding: 10rpx 0;

					.uni-numbox {
						background-color: #f5f5f5;
					}

					.uni-input-input {
						padding-top: 18rpx;
					}
				}
			}
		}


		.discountsPop {
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			z-index: 9999;

			.pop-mask {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.3);
			}

			.pop-box {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 800rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background-color: white;
				overflow: auto;

			}
		}


		.example-body {
			padding: 10px;
		}

		.scroll-view {
			/* #ifndef APP-NVUE */
			width: 100%;
			height: 100%;
			/* #endif */
			flex: 1
		}

		.discounts:nth-child(1) {
			margin: 0;
		}

		.discounts {
			height: 140rpx;
			width: 100%;
			background-image: linear-gradient(to right, #f80f0f, #e82222, red);
			overflow: hidden;
			margin-top: 10rpx;

			.topTitle {
				height: 40rpx;
				width: 250rpx;
				line-height: 40rpx;
				text-align: center;
				// background-color:   #cb0d0d;
				color: white;
				font-weight: 700;
			}

			.discountsPrice {
				font-size: 50rpx;
				line-height: 80rpx;
				color: white;
				font-weight: 700;
				width: 250rpx;
				text-align: center;
			}
		}

	}
</style>
